{extend name="base"/}
{block name="resources"}
<style>
	.ns-body-content {min-height: 650px;}
	
    .ns-purchase-page{display: flex;width: 615px;margin: 35px auto;color: #333;}
    .ns-purchase-page .purchase-img{display: flex;justify-content: center;align-items: center;width: 85px;height: 85px;margin-right: 20px;}
    .ns-purchase-page .purchase-img img{max-width: 100%;max-height: 100%;}
    .ns-purchase-page .purchase-content{flex: 1;}
    .ns-purchase-page .purchas-title{font-size: 18px;color: #323233;line-height: 24px;margin-right: 8px;margin-bottom: 8px;}
    .ns-purchase-page .purchas-desc{color: #969799;line-height: 20px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    .ns-purchase-page .purchas-price span:nth-of-type(2){}
    .ns-purchase-page .purchas-period{
        margin-top: 15px;
    }
    .ns-purchase-page .purchas-period .period-title{
        font-size: 16px;
    }
    .ns-purchase-page .purchas-period .period-content{
        display: flex;
        margin-top: 5px;
    }
    .ns-purchase-page .purchas-period .period-content li{
        width: 120px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #e5e5e5;
        margin-right: 8px;
        cursor: pointer;
    }
    .ns-purchase-page .purchas-shop .shop-content{
        display: flex;
        justify-content: space-between;
        width: 511px;
        margin-top: 5px;
        padding: 15px;
        border: 1px solid #e5e5e5;
        box-sizing: border-box;
    }

    .ns-purchase-page .purchas-shop .shop-content-left{
        display: flex;
        flex-direction: column;
    }
    .ns-purchase-page .purchas-shop .shop-content-left span + span{
        margin-top: 5px;
        font-size: 12px;
        color: #646566;
        line-height: 18px;
        text-align: justify;
    }
    .ns-purchase-page .purchas-shop .shop-content-right{
        display: flex;
        align-items: center;
    }
    .ns-purchase-page .purchas-shop .shop-content input{
        padding-left: 10px;
        border: 1px solid #e5e5e5;
        height: 30px;
        line-height: 30px;
    }
    .detail-operation{
        margin-top: 50px;
        display: flex;
        align-items: center;
    }
    .sms-price span{
        font-size: 20px;
    }
</style>
{/block}
{block name="main"}
<div class="ns-purchase-page layui-form">
    <div class="purchase-img">
        <img src="{:img($list['0']['sms_image'])}" onerror=src="HOME_IMG/sms.png" />
    </div>
    <div class="purchase-content">
        <h2 class="purchas-title">{$list['0']['sms_name']}</h2>
        <p class="purchas-desc">{$list['0']['desc']}</p>
        <span class="sms-price">价格：<span class="ns-red-color">￥{$list['0']['sms_money']}</span></span>
        <div class="purchas-period">
            <div class="period-title">规格</div>
            <ul class="period-content">
                {foreach $list as $list_k => $list_v}
                <li class="{if $list_k == 0}ns-text-color ns-border-color{/if}" data-sms-img="{$list_v.sms_image}" data-sms-name="{$list_v.sms_name}" data-sms-desc="{$list_v.desc}" data-sms-id="{$list_v.package_id}" data-sms-fee="{$list_v.sms_money}">{$list_v.sms_num}条</li>
                {/foreach}
            </ul>
        </div>
        <div class="detail-operation">
            <button class="layui-btn ns-bg-color submit-order">提交订单</button>
            <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var smsFee = "{$list['0']['sms_money']}",
        smsId = "{$list['0']['package_id']}",
        smsImg,smsName,smsDesc,
        repeat_flag = false; //防止重复点击

    // 短信规格
    $(".period-content li").click(function () {
        $(this).addClass("ns-text-color ns-border-color").siblings().removeClass("ns-text-color ns-border-color");

        smsFee = $(this).attr("data-sms-fee");
        smsImg = $(this).attr("data-sms-img");
        smsName = $(this).attr("data-sms-name");
        smsDesc = $(this).attr("data-sms-desc");
        smsId = $(this).attr("data-sms-id");
        $(".sms-price span").text("￥" + smsFee);
        $(".purchase-img").html(`<img src="${ns.img(smsImg)}" alt="" onerror=src="HOME_IMG/sms.png">`);
        $(".purchas-title").text(smsName);
        $(".purchas-desc").text(smsDesc);
    });

    // 提交订单
    $(".detail-operation .submit-order").click(function () {
        if (repeat_flag) return false;
        repeat_flag = true;

        $.ajax({
            type: 'POST',
            url: ns.url("home/ordercreate/create"),
            data: {'sms_package_id': smsId},
            dataType: 'JSON',
            success: function(res) {
                layer.msg(res.message);
                repeat_flag = false;

                if (res.code >= 0) {
                    location.href = ns.url('home/ordercreate/confirm', {out_trade_no:res.data});
                } else {
                    location.reload();
                }
            }
        });
    });

    function back() {
        window.history.back();
    }
</script>
{/block}